<script lang="ts">
export default {
  name: 'Study8StuDemo1'
}
</script>

<template>
  <h2>组件v-model</h2>
  <div class="note">
    <h3>双向（父子）修改值</h3>
    <p>1. 参数 emit修改props： 通过emit传值，回传父组件，间接修改props值（子组件无法直接修改Props传过来的值）</p>
    <p>2. input emit修改props： 通过emit传值，回传父组件，间接修改props值（vue3不允许用input双向绑定）</p>
    <p>3. input defineModel定义双向绑定值：达到子组件input的值改变，父组件的也改变（不用defineProps传值，简洁清晰）</p>
    <p>注：vue3.4之前用emit,3.4开始才能用组件v-model</p>
  </div>

  <div class="group">
    <div class="group3">
      <h2>SonDemo1</h2>
      <button type="button" @click="mVal++">在父组件修改mVal的值</button>
      <SonDemo1
        :mVal="mVal"
        @update:m-val="
          (val) => {
            mVal = val
          }
        "
      ></SonDemo1>
    </div>
    <div class="group3">
      <h2>SonDemo2</h2>
      <button type="button" @click="mVal++">在父组件修改mVal的值</button>
      <SonDemo2
        :mVal="mVal"
        @update:m-val="
          (val) => {
            mVal = val
          }
        "
      ></SonDemo2>
    </div>
    <div class="group3">
      <h2>SonDemo3</h2>
      <!-- <button type="button" @click="mVal++">在父组件修改mVal的值</button> -->
      <p @click="mVal++">在父组件修改mVal的值:{{ mVal }}</p>
      <SonDemo3 v-model="mVal"></SonDemo3>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SonDemo1 from './components/SonDemo1.vue'
import SonDemo2 from './components/SonDemo2.vue';
import SonDemo3 from './components/SonDemo3.vue';



const mVal = ref(100)
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
